<template>
  <div class="smblock">
    <!-- 消息 互动 新职位 -->
    <p @click="objfun($event)">
      <span @click="fun('all')">全部</span>
      <span @click="fun('fujin')">附近</span>
      <span @click="fun('shixi')">实习</span>
      <span @click="fun('alljob')">全职</span>
      <span @click="fun('yanta')">雁塔</span>
      <span @click="fun('jingyan')">经验</span>
    </p>
    <component :is="com"></component>
  </div>
</template>

<script>
import all from "@/components/mode/all.vue";
import fujin from "@/components/mode/fujin.vue";
import shixi from "@/components/mode/shixi.vue";
import alljob from "@/components/mode/alljob.vue";
import yanta from "@/components/mode/yanta.vue";
import jingyan from "@/components/mode/jingyan.vue";


export default {
  components: {
    all,
    fujin,
    shixi,
    alljob,
    yanta,
    jingyan
  },
  data() {
    return {
      com: "all",
    };
  },
  methods: {
    fun(cont) {
      this.com = cont;
    },
    objfun(obj){
      console.log(obj.target.parentNode.childNodes);
      obj.target.parentNode.childNodes.forEach((item)=>{
        item.classList.remove('active')
      })
      obj.target.classList.add('active')
    }
  },
};
</script>

<style scoped>
.smblock > p {
  width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0.04rem 0;
    position: fixed;
    top: 1.00rem;
    background: #fff;
}
.smblock > p > span {
  border: 0.01rem solid #ccc;
  font-size: 0.14rem;
  line-height: 0.26rem;
  padding: 0 0.10rem;
  border-radius: 0.04rem;
}
.smblock > p > .active {
  border: 0.02rem solid #39c0ba;
  font-size: 0.14rem;
  line-height: 0.26rem;
  background: #39c0ba38;
  padding: 0 0.10rem;
  border-radius: 0.04rem;
  color: #39c0ba;
}
</style>